<template>
  <div>
    <a-button-group>
      <a-button type="primary" icon="edit" @click="addView">{{ $t('m.common.button.design') }}</a-button>
      <a-button icon="plus" @click="selectView">{{ $t('m.eform.formDesign.label.xuan-ze-lie-biao-huo-shu') }}</a-button>
      <a-button icon="plus" @click="selectReport">{{ $t('m.eform.formDesign.label.xuan-ze-bao-biao') }}</a-button>
      <a-button icon="plus" @click="selectForm">{{ $t('m.eform.formDesign.label.xuan-ze-biao-dan') }}</a-button>
      <a-button icon="delete" @click="deleteView">{{ $t('m.common.button.clear') }}</a-button>
      <a-button icon="setting" @click="colsSetting">{{ $t('m.eform.formDesign.label.lie-shu-xing') }}</a-button>
      <a-button v-if="changeTabNameFlg" icon="edit" @click="changeTabName">{{ $t('m.eform.formDesign.label.geng-gai-ye-qian-ming') }}</a-button>
      <a-button v-if="viewItem.viewType === 'table' || viewItem.viewType === 'editableTable' || viewItem.viewType === 'tree'" icon="sliders" @click="relationSetting">{{ $t('m.eform.formDesign.label.lian-dong-she-zhi') }}</a-button>
      <a-button v-if="viewItem.viewType === 'form'" icon="file" @click="formSetting">{{ $t('m.eform.formDesign.label.biao-dan-she-zhi') }}</a-button>
    </a-button-group>

    <actAppView-modal ref="actAppViewModal" @ok="modalFormOk" :groupId="groupId"></actAppView-modal>
    <actAppView-editable-modal ref="actAppViewEditableModal" @ok="modalFormOk" :groupId="groupId"></actAppView-editable-modal>
    <ActAppTreeModal ref="actAppTreeModal" @ok="modalFormOk" :groupId="groupId"></ActAppTreeModal>
    <select-view-part-dialog ref="comp" @selectFinished="selectViewOk" :groupId="groupId"></select-view-part-dialog>
    <select-widget-dialog ref="compReport" @selectFinished="selectReportOk" :groupId="groupId"></select-widget-dialog>
    <select-form-dialog ref="compForm" @selectFinished="selectFormOk" :groupId="groupId"></select-form-dialog>

    <a-modal
      :maskClosable="false"
      :keyboard="false"
      :title="addTitle"
      :visible="addVisible"
      :width="addWidth"
      @cancel="handleAddCancel">

      <a-button-group>
        <a-button icon="table" @click="addTableView">{{ $t('m.eform.formDesign.label.lie-biao') }}</a-button>
        <a-button icon="profile" @click="addTreeView">{{ $t('m.eform.formDesign.label.shu') }}</a-button>
        <!--<a-button icon="bar-chart" @click="addReportView">报表</a-button>-->
        <!--<a-button icon="file-markdown" @click="addFormView">表单</a-button>-->
      </a-button-group>

      <template slot="footer">
        <a-button key="back" @click="handleAddCancel">{{ $t('m.common.button.close') }}</a-button>
      </template>
    </a-modal>

    <a-modal
      :maskClosable="false"
      :keyboard="false"
      :title="tabNameTitle"
      :visible="tabNameVisible"
      :width="tabNameWidth"
      @cancel="handleTabNameCancel">

      <a-form-item :label="$t('m.eform.formDesign.label.ye-qian-ming')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!--        <a-input v-model="viewItem.viewName"></a-input>-->
        <locale-tag v-model="viewItem.viewName" :group-id="groupId"></locale-tag>
      </a-form-item>


      <template slot="footer">
        <a-button key="back" @click="handleTabNameCancel">{{ $t('m.common.button.close') }}</a-button>
      </template>
    </a-modal>

    <a-modal
      :maskClosable="false"
      :keyboard="false"
      :title="relationTitle"
      :visible="relationVisible"
      :width="relationWidth"
      @cancel="handleRelationCancel">

      <a-form-item :label="$t('m.eform.formDesign.label.xiang-ying-qi-ta-mo-xing-lian-dong')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
        <a-select v-model="viewItem.relationOpenFks" style="width: 100%">
          <a-select-option value="open">{{ $t('m.eform.formDesign.label.kai-qi-mo-ren') }}</a-select-option>
          <a-select-option value="closed">{{ $t('m.common.button.close') }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item :label="$t('m.eform.formDesign.label.lian-dong-qi-ta-mo-xing')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
        <a-select v-model="viewItem.relationStatus" style="width: 100%">
          <a-select-option value="open">{{ $t('m.eform.formDesign.label.kai-qi-mo-ren') }}</a-select-option>
          <a-select-option value="closed">{{ $t('m.common.button.close') }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item :label="$t('m.eform.formDesign.label.xian-yin-gui-ze')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
        <a-select v-model="viewItem.showRules" style="width: 100%">
          <a-select-option value="show">{{ $t('m.eform.formDesign.label.xian-shi-mo-ren') }}</a-select-option>
          <a-select-option value="showAfterFks">{{ $t('m.eform.formDesign.label.bao-cun-hou-xian-shi') }}</a-select-option>
        </a-select>
      </a-form-item>

      <template slot="footer">
        <a-button key="back" @click="handleRelationCancel">{{ $t('m.common.button.close') }}</a-button>
      </template>
    </a-modal>

    <a-modal
      :maskClosable="false"
      :keyboard="false"
      :title="formTitle"
      :visible="formVisible"
      :width="formWidth"
      @cancel="handleFormCancel">

      <a-form-item :label="$t('m.eform.formDesign.label.biao-dan-an-niu-lan')" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select v-model="viewItem.saveBut" style="width: 100%">
          <a-select-option value="auto">{{ $t('m.eform.formDesign.label.zi-dong') }}</a-select-option>
          <a-select-option value="display">{{ $t('m.eform.formDesign.label.yin-cang') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.eform.appform.entity.formStatus')" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select v-model="viewItem.formStatus" style="width: 100%">
          <a-select-option value="auto">{{ $t('m.eform.formDesign.label.zi-dong') }}</a-select-option>
          <a-select-option value="editable">{{ $t('m.eform.formDesign.label.ke-bian-ji') }}</a-select-option>
          <a-select-option value="disabled">{{ $t('m.eform.formDesign.label.zhi-du') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.zhu-biao-dan')" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select v-model="viewItem.mainForm" style="width: 100%">
          <a-select-option value="Y">{{ $t('m.eform.formDesign.label.zhu-biao-dan-y') }}</a-select-option>
          <a-select-option value="N">{{ $t('m.eform.formDesign.label.zhu-biao-dan-n') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.liu-cheng-biao-dan')" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select v-model="viewItem.flowForm" style="width: 100%">
          <a-select-option value="Y">{{ $t('m.eform.formDesign.label.zhu-biao-dan-y') }}</a-select-option>
          <a-select-option value="N">{{ $t('m.eform.formDesign.label.zhu-biao-dan-n') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.xiang-ying-qi-ta-mo-xing-lian-dong')" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select v-model="viewItem.relationOpenFks" style="width: 100%">
          <a-select-option value="open">{{ $t('m.eform.formDesign.label.kai-qi-mo-ren') }}</a-select-option>
          <a-select-option value="closed">{{ $t('m.common.button.close') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.eform.formDesign.label.lian-dong-qi-ta-mo-xing')" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select v-model="viewItem.relationStatus" style="width: 100%">
          <a-select-option value="open">{{ $t('m.eform.formDesign.label.kai-qi-mo-ren') }}</a-select-option>
          <a-select-option value="closed">{{ $t('m.common.button.close') }}</a-select-option>
        </a-select>
      </a-form-item>

      <template slot="footer">
        <a-button key="back" @click="handleFormCancel">{{ $t('m.common.button.close') }}</a-button>
      </template>
    </a-modal>

    <a-modal
      :maskClosable="false"
      :keyboard="false"
      :title="title"
      :visible="visible"
      :width="width"
      @cancel="handleCancel">

      <a-row v-for="(col, index) in cols" :key="index">
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.lie-index1', [(index+1)])" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number :min="1" :max="24" v-model="col.span" style="width: 100%"></a-input-number>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.formDesign.label.gu-ding-gao-du')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number v-model="col.height" style="width: 100%"></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <template slot="footer">
        <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>

  import SelectViewPartDialog from '../../select/dialog/SelectViewPartDialog'
  import SelectWidgetDialog from '../../select/dialog/SelectWidgetDialog'
  import ActAppViewModal from '../ActAppViewModal'
  import ActAppViewEditableModal from "../ActAppViewEditableModal";
  import ActAppTreeModal from '../ActAppTreeModal'
  import { getAction } from '@/api/manage'
  import YchConstant from "@/api/YchConstant";
  import SelectFormDialog from "../../select/dialog/SelectFormDialog";
  import LocaleTag from "../../localeProvider/tag/LocaleTag";

  export default {
    name: 'ViewLayoutItem',
    components: {
      SelectViewPartDialog,
      ActAppViewModal,
      SelectWidgetDialog,
      ActAppTreeModal,
      SelectFormDialog,
      LocaleTag,
      ActAppViewEditableModal,
    },
    props: {
      viewItem: Object,
      cols: Array,
      changeTabNameFlg: Boolean,
      groupId: {
        type: String,
        required: true
      },
    },
    data () {
      return {
        title: this.$t('m.eform.formDesign.label.lie-shu-xing'),
        width: '500px',
        visible: false,
        addTitle: this.$t('m.eform.formDesign.label.ye-mian-lei-xing'),
        addWidth: '300px',
        addVisible: false,
        tabNameTitle: this.$t('m.eform.formDesign.label.geng-gai-ye-qian-ming'),
        tabNameWidth: '500px',
        tabNameVisible: false,
        relationTitle: this.$t('m.eform.formDesign.label.lian-dong-she-zhi'),
        relationWidth: '500px',
        relationVisible: false,
        formTitle: this.$t('m.eform.formDesign.label.biao-dan-she-zhi'),
        formWidth: '500px',
        formVisible: false,
        labelCol: {
          sm: { span: 8 }
        },
        wrapperCol: {
          sm: { span: 12 }
        },
        labelCol2: {
          sm: { span: 14 }
        },
        wrapperCol2: {
          sm: { span: 10 }
        },
        url: {
          queryByCode: YchConstant.PREFIX_EFORM + '/manage/actAppView/queryByCode'
        }
      }
    },
    methods: {
      addView () {
        if (this.viewItem.viewCode && this.viewItem.viewType != 'report' && this.viewItem.viewType != 'form') {
          //列表和树
          getAction(this.url.queryByCode, { viewCode: this.viewItem.viewCode }).then((res) => {
            if (res.success) {
              this.editView(res.result)
            } else {
              this.messageUtil.warning(res.message)
            }
          }).finally(() => {
          })
        } else if (this.viewItem.viewCode && this.viewItem.viewType == 'report') {
          //TODO 报表
          this.$message.warning(this.$t('m.eform.formDesign.label.zan-bu-zhi-chi'))
        }  else if (this.viewItem.viewCode && this.viewItem.viewType == 'form') {
          //TODO 表单
          this.$message.warning(this.$t('m.eform.formDesign.label.zan-bu-zhi-chi'))
        } else {
          this.addVisible = true
        }
      },
      selectView () {
        this.$refs.comp.radio = true
        this.$refs.comp.visible = true
      },
      selectReport () {
        this.$refs.compReport.radio = true
        this.$refs.compReport.visible = true
      },
      selectForm () {
        this.$refs.compForm.radio = true
        this.$refs.compForm.visible = true
      },
      deleteView () {
        this.viewItem.viewName = ''
        this.viewItem.viewCode = ''
        this.viewItem.viewType = ''
        this.viewItem.relationStatus = 'open'
        this.viewItem.relationOpenFks = 'open'
        this.viewItem.showRules = 'show'
        this.viewItem.saveBut = 'auto';
        this.viewItem.formStatus = 'auto';
        this.viewItem.mainForm = "Y";
        this.viewItem.flowForm = "N";
      },
      colsSetting () {
        this.visible = true
      },
      modalFormOk (formData) {
        this.viewItem.viewCode = formData.viewCode
        this.viewItem.viewName = formData.viewName
        this.viewItem.viewType = formData.viewType
        this.$emit('selectViewOk', formData)
      },
      editView (record) {
        if (record.viewType === 'tree') {
          this.$refs.actAppTreeModal.edit(record)
          this.$refs.actAppTreeModal.title = this.$t('m.common.button.update')
        } else if (record.viewType === 'table'){
          this.$refs.actAppViewModal.edit(record)
          this.$refs.actAppViewModal.title = this.$t('m.common.button.update')
        } else if (record.viewType === 'editableTable'){
          this.$refs.actAppViewEditableModal.edit(record)
          this.$refs.actAppViewEditableModal.title = this.$t('m.common.button.update')
        }
      },
      addTableView () {
        this.addVisible = false
        this.$refs.actAppViewModal.add()
        this.$refs.actAppViewModal.title = this.$t('m.common.button.add')
      },
      addTreeView () {
        this.addVisible = false
        this.$refs.actAppTreeModal.add()
        this.$refs.actAppTreeModal.title = this.$t('m.common.button.add')
      },
      addReportView () {
        this.addVisible = false
        //TODO 报表
        this.$message.warning(this.$t('m.eform.formDesign.label.zan-bu-zhi-chi'))
      },
      addFormView () {
        this.addVisible = false
        //TODO 表单
        this.$message.warning(this.$t('m.eform.formDesign.label.zan-bu-zhi-chi'))
      },
      selectViewOk (selectedRowKeys, selectionRows) {
        if (selectionRows) {
          this.viewItem.viewName = selectionRows[0].viewName
          this.viewItem.viewCode = selectionRows[0].viewCode
          this.viewItem.viewType = selectionRows[0].viewType
          this.viewItem.relationStatus = 'open'
          this.viewItem.relationOpenFks = 'open'
          this.viewItem.showRules = 'show'
          this.$emit('selectViewOk', selectionRows[0])
        }
      },
      selectReportOk (selectedRowKeys, selectionRows) {
        if (selectionRows) {
          this.viewItem.viewName = selectionRows[0].widgetName
          this.viewItem.viewCode = selectionRows[0].widgetCode
          this.viewItem.viewType = 'report'
          this.$emit('selectViewOk', this.viewItem)
        }
      },
      selectFormOk (selectedRowKeys, selectionRows) {
        if (selectionRows) {
          this.viewItem.viewName = selectionRows[0].formName
          this.viewItem.viewCode = selectionRows[0].formCode
          this.viewItem.viewType = 'form'
          this.viewItem.relationStatus = 'open'
          this.viewItem.relationOpenFks = 'open'
          this.viewItem.saveBut = 'auto';
          this.viewItem.formStatus = 'auto';
          this.viewItem.mainForm = "Y";
          this.viewItem.flowForm = "N";
          this.$emit('selectViewOk', this.viewItem)
        }
      },
      handleAddCancel () {
        this.addVisible = false
      },
      changeTabName () {
        this.tabNameVisible = true
      },
      handleTabNameCancel () {
        this.tabNameVisible = false
      },
      relationSetting () {
        this.relationVisible = true
      },
      handleRelationCancel () {
        this.relationVisible = false
      },
      formSetting () {
        this.formVisible = true
      },
      handleFormCancel () {
        this.formVisible = false
      },
      handleCancel () {
        this.visible = false
      },
    }
  }
</script>
